<template>
	<div class="container" :id="id">
		<div class="container-box">
			<div class="top-box">
				<h2 class="box-title-ico">
					<span class="box-title-span">团队信息</span>
				</h2>
			</div>
			<div class="content-box">
				<div class="box-text">
					<template v-for="(item,$index) in data">
						<div class="row">
							<template v-for="(key,$ind) in item">
								<div class="col-md-6 col-sm-12 col-xs-12" v-if="key[0].content!=''&&key[0].content!=''">
									<div class="tema-item">
										<div class="team-item-info">
											<div class="logo-info">
												<img class="img-box" :src="img_root+key[6].upload" v-if="key[6].upload!=''">
												<img src="../../assets/images/head-img-defalut.png" class="img-box" v-else>
												<h4 class="info-h4">{{key[0].content}}</h4>
												<h4 class="info-h4">{{key[1].content}}</h4>
												<h4 class="info-h4 job-work">{{key[2].content}}</h4>
											</div>
											<div class="content-info">
												<span class="jieshao-span">介绍：</span>
												<span class="all-jieshao hidden">{{key[3].content}}</span>
												
												<span class="alt-jieshao">
													{{key[3].content|hidden}}
												</span>
												<a style="cursor: pointer; " href="javascript:;"  class="js-shrink-btn  c9 point hover_underline" v-if="key[3].content.length>80" @click="show($event)">
													<span>详情</span>
												</a>
												
											</div>
											<div class="panel-group" id="accordion">
												
												<div class="panel panel-default" v-if="key[4].content !=''|| key[4].content!=' '">
													<div class="panel-heading">
														<a data-toggle="collapse" data-parent="#accordion" :href="id_name+id_clo+key[4].slug">
															<h4 class="panel-title">
																	<i class="fa fa-wikipedia-w"></i>
																	<span>个人主页</span>
																	<span class="right"><i class="fa fa-angle-double-down"></i></span>
															</h4>
														</a>

													</div>
													<div :id="id_clo+key[4].slug" class="panel-collapse collapse in">
														<div class="panel-body">
															<div style="padding: 15px;">{{key[4].content}}</div>
																
														</div>
													</div>
												</div>
												<div class="panel panel-default" v-if="key[5].content !=''|| key[5].content!=' '">
													<div class="panel-heading">
														<a data-toggle="collapse" data-parent="#accordion" :href="id_name+id_clo+key[5].slug">
															<h4 class="panel-title">
																<i class="fa fa-linkedin"></i>
																	<span>{{key[5].title}}</span>
																	<span class="right"><i class="fa fa-angle-double-down"></i></span>
																</h4>
														</a>
													</div>
													<div :id="id_clo+key[5].slug" class="panel-collapse collapse in">
														<div class="panel-body">
															<div style="padding: 15px;">{{key[5].content}}</div>												
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
								
							</template>
						</div>
					</template>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default{
		data:function(){
			return{
				img_root:'//static.imrating.com/',
				data:{},
				id_clo:'colland',
				id_name:'#'
			}
		},
		props:['id','teamdata'],
		mounted:function(){
			let teamdata = this.teamdata;
			for (let key in teamdata) {
				for (let s in teamdata[key]) {
					if(teamdata[key][s][3].content.length>80){
						teamdata[key][s]['lenghts'] = true;
					}else{
						teamdata[key][s]['lenghts'] = false;
					}
				}
			}
			this.data = teamdata;
			console.log(teamdata)
		},
		methods:{
			show(event){
				let evt = $(event).siblings();
				      let allcontent = $(evt.prevObject[0].path[2])
				        .children("span")
				        .get(0);
				      let lastcontent = $(evt.prevObject[0].path[2])
				        .children("span")
				        .get(1);
				      let netxspan = $(event)[0].path[0];
				      if ($(allcontent)[0].classList.length == 2) {
				        $(netxspan).html("详情");
				        $(allcontent).removeClass("hidden");
				        $(lastcontent).addClass("hidden");
				      } else {
				        $(netxspan).html("收起");
				
				        $(lastcontent).removeClass("hidden");
				        $(allcontent).addClass("hidden");
				      }
			}
		},
		filters: {
			hidden: function(val) {
				if (val.length > 80) {
					return val.replace(/[\r\n]/g,"").substring(0, 80) + "...";
				} else {
					return val;
				}
			}
		}
	}
</script>
<style scoped="scoped">
	.panel{
		  margin-bottom: 20px;
			background-color: #fff;
			border: 1px solid transparent;
			border-radius: 4px;
			-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
			box-shadow: 0 1px 1px rgba(0,0,0,.05);
	}
	.panel-group{
		margin-top: 20px;
		border-color: #ddd;
	}
	.panel-group .panel{
		margin-bottom: 0;
    border-radius: 4px;
	}
	.panel-title{
		  margin-top: 0;
			margin-bottom: 0;
			font-size: 16px;
			
			overflow: hidden;
			color: #FFFFFF;
	}
	a:hover{
		text-decoration: none;
	}
	.panel-heading{
		padding: 10px 15px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
		width: 100%;
		overflow: hidden;
	}
	.panel-group .panel-heading{
		border-bottom:0;
	}
	.panel-default>.panel-heading{
		color: #FFFFFF;
    background-color: #007DDB;
    border-color: #ddd;
	}
	.tema-item{
		width: 100%;
		margin-bottom: 15px;
		border-radius: 4px;
		box-shadow: 0px 1px 3px #78b5f140;
		text-align: left;
	}
	.collapsed{
		color: #FFFFFF;
	
		line-height: 9px !important;
	}
	.team-item-info{
		position: relative;
		padding: 15px;
		width: 100%;
		text-align: left;
		text-indent: 0;
		
		overflow: hidden;
	}
	.logo-info{
		width: 100%;
		overflow: hidden;
	}
	.img-box{
		float: left;
		width: 100px;
		height: 100px;
		border-radius: 10px;
		margin-right: 15px;
	}
	.name-en{
		margin-right: 30px;
	}
	.info-h4{
		overflow: hidden;
		padding: 3px 0;
	}
	.job-work{
		color: #f08800;
	}
	.content-info{
		width: 100%;
		min-height: 100px;
		margin-top: 10px;
	}
	.jieshao-span{
		font-weight: 600;
	}
	.hidden{
		display: none;
	}
	.a-more{
		color: #005CBF;
	}
	.js-shrink-btn{
		color: #005CBF;
		float: right;
	}
</style>